<template>
    <div class="questions_list">
        <div class="head border-radius bg-fff p-1 d-flex between">
            <div class="filters">
                <label >
                    <span>状态:</span>
                    <Select class="w150" v-model="filters.type" @on-change="getList_page(1)">
                        <Option value="未答复">未答复</Option>
                        <Option value="已答复">已答复</Option>
                    </Select>
                </label>
                 <Tooltip content="输入后按回车确认" >
                    <label >
                        <span>姓名 / 班级 / 学号:</span>
                        <Input class="w150" v-model="filters.keyword" clearable @on-clear="getList_page(1)" @on-enter="getList_page(1)"></Input>
                    </label>
                </Tooltip>
                
            </div>
        </div>
        <div class="content mt-1">
            <Table :columns="columns" class="diy_table" :data="list"></Table>
            <div class="clearfix mt-2">
                <Page :current.sync="filters.page" :page-size="filters.list_rows" :total="total_page" show-sizer class="float-right" show-total @on-change="getList_page"/>
            </div>
        </div>
       <Modal v-model="detailsShow" class="diy_modal" title="问题详情" :ok-text="detailsData.can_reply?'关闭':'答复'" :cancel-text="detailsData.can_reply?'':'关闭'" @on-ok="!detailsData.can_reply&&(detailsShow=false,replyShow=true)">
            <h4 class="py-1">{{detailsData.title}}</h4>
            <p class="my-1">{{detailsData.content}}</p>
            <div class="files mt-3" v-if="detailsData.file_list.length">
                <span class="mr-1">附件列表:</span>
                <download-list :file_list="detailsData.file_list"/>
            </div>
       </Modal>
       <Modal v-model="replyShow" class="diy_modal" title="回复问题" @on-ok="submit" >
            <div class="reply">
                <div>
                    <p class="mr-1 float-left" style="width:80px">回复主题</p>
                    <h4 class="d-table">{{detailsData.title}}</h4>
                </div>
                <div class="my-2 d-flex">
                    <p class="mr-1" style="width:80px">答复内容</p>
                    <Input v-model="replyFm.content" type="textarea" :autosize="{minRows:4}" />
                </div>
                <div class="d-flex">
                    <p  style="width:80px">附件列表</p>
                    <div class="d-talbe">
                        <upload-button @set_files="set_files"/>
                    </div>
                </div>
            </div>

       </Modal>
    </div>
</template>

<script>
import pageMixin from "@/common/pageMixin"
import {general_questions,general_questions_reply,general_questions_detail} from "@/common/tapi"
import uploadButton from "@/components/uploadButton"
export default {
    mixins:[pageMixin],
    data(){
        return {
            replyFm:{
                qid:0,
                content:'',
                files:'',
            },
            filters:{
                keyword:'',
                type:'未答复',
            },
            replyShow:false,
            detailsShow:false,
            detailsData:{
                can_reply:true,
                title:'',
                content:'',
                file_list:[]
            },
            updateIndex:-1,
            user:{
                no:'',
                name:'',
                sex:'男'
            },
            modalShow:false,
            columns:[
                {
                    title:'问题编号',
                    key:'id'
                },
                {
                    title: '主题',
                    key: 'title'
                },
                {
                    title: '姓名',
                    render:(h,params)=>h('p',params.row.student?.name)
                },
                {
                    title: '班级',
                    key: 'class_name'
                },
                {
                    title: '提问时间',
                    key: 'create_time',
                    width:170,
                },
                {
                    title: '操作',
                    width:210,
                    align: 'center',
                    render:(h,params)=>{
                        return h('div',[
                            h('Button',{
                                props:{
                                    ghost:true,
                                    type:'primary'
                                },
                                class:'mr-1',
                                on:{
                                    click:()=>{
                                        general_questions_detail({qid:params.row.id})
                                        .then(res=>{
                                            if(res){
                                                this.detailsData.title=res.data.info.title
                                                this.detailsData.content=res.data.info.content
                                                this.detailsData.file_list=res.data.info.file_list
                                                this.detailsData.can_reply=!!params.row.reply_id
                                                this.detailsShow=true
                                            }
                                        })
                                        
                                    }
                                }
                            },'详情'),
                            h('Button',{
                                props:{
                                    ghost:true,
                                    type:'info'
                                },
                                class:'mr-1',
                                on:{
                                    click:()=>{
                                        general_questions_detail({qid:params.row.id})
                                        .then(res=>{
                                            if(res){
                                                this.detailsData.title=res.data.info.title
                                                this.detailsData.can_reply=!!params.row.reply_id

                                                if(params.row.reply_id){
                                                    this.detailsData.content=res.data.info.reply.content
                                                    this.detailsData.file_list=res.data.info.reply.file_list
                                                    this.detailsShow=true
                                                }else{
                                                    this.replyFm.qid=params.row.id
                                                    this.detailsData.content=res.data.info.content
                                                    this.detailsData.file_list=res.data.info.file_list
                                                    this.replyShow=true
                                                }
                                            }
                                        })
                                       
                                        
                                    }
                                }
                            },params.row.reply_id?'查看答复':'答复')
                        ])
                    }
                }
            ],
            list:[ ]
           
        }
    },
    methods:{
        set_files(listStr){
            this.replyFm.files=listStr
        },
        submit(){
            general_questions_reply(this.replyFm)
            .then(res=>{
                if(res){
                    this.$Notice.success({
                        title: '成功',
                        desc: '回复成功'
                    });
                    this.getList()
                }
            })
        },
        getList(){
            general_questions(this.filters)
            .then(res=>{
                if(res){
                    this.list=res.data.list
                    this.total_page=res.data.pageinfo.total
                }
            })
        },
       
    },
    components:{
        uploadButton
    },
    created(){
        this.getList_page()
    }
}
</script>
